<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS Drum Kit</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>


    <div class="keys">
        <div data-key="65" class="key">
            <kbd>A</kbd>
            <span class="sound">clap</span>
        </div>
        <div data-key="83" class="key">
            <kbd>S</kbd>
            <span class="sound">hihat</span>
        </div>
        <div data-key="68" class="key">
            <kbd>D</kbd>
            <span class="sound">kick</span>
        </div>
        <div data-key="70" class="key">
            <kbd>F</kbd>
            <span class="sound">openhat</span>
        </div>
        <div data-key="71" class="key">
            <kbd>G</kbd>
            <span class="sound">boom</span>
        </div>
        <div data-key="72" class="key">
            <kbd>H</kbd>
            <span class="sound">ride</span>
        </div>
        <div data-key="74" class="key">
            <kbd>J</kbd>
            <span class="sound">snare</span>
        </div>
        <div data-key="75" class="key">
            <kbd>K</kbd>
            <span class="sound">tom</span>
        </div>
        <div data-key="76" class="key">
            <kbd>L</kbd>
            <span class="sound">tink</span>
        </div>
    </div>

    <audio data-key="65" src="sounds/clap.wav"></audio>
    <audio data-key="83" src="sounds/hihat.wav"></audio>
    <audio data-key="68" src="sounds/kick.wav"></audio>
    <audio data-key="70" src="sounds/openhat.wav"></audio>
    <audio data-key="71" src="sounds/boom.wav"></audio>
    <audio data-key="72" src="sounds/ride.wav"></audio>
    <audio data-key="74" src="sounds/snare.wav"></audio>
    <audio data-key="75" src="sounds/tom.wav"></audio>
    <audio data-key="76" src="sounds/tink.wav"></audio>

    <script>
        // 判断按下去的按键的code值，和绑定在audio上面的key值相同，则播放该声音
        function playSound(e) {
            var code = e.keyCode;
            var audios = document.getElementsByTagName("audio");
            var keys = document.getElementsByClassName("key");
            for (var index = 0; index < audios.length; index++) {
                var element = audios[index];
                var key = keys[index];
                // 当audio上面的自定义key值和按键的code值相同，变播放该音乐
                if (element.dataset.key == code) {
                    key.classList.add('playing');
                    element.currentTime = 0; // 每次保证从0开始播放
                    element.play();
                }
            }
        }

        // 播放完成后移除动画
        function removeTransition(e) {
            console.log(e.propertyName);
            if (e.propertyName !== 'transform') return;
            e.target.classList.remove('playing');
        }

        var keys = Array.from(document.getElementsByClassName("key"));
        keys.forEach(function(element) { // 给每个按键上监听动画执行完毕的事件
            // transitionend 在 Internet Explorer 9 及更早 IE 版本上不兼容。
            element.addEventListener('transitionend', removeTransition);
        }, this);

        window.addEventListener('keydown', playSound); // 监听按键
    </script>


</body>

</html>